<template>
<div class="clearfix">
  <div class="pull-left width70 border">
    <div>
      <label>当前分类：</label>
      <span>{{ selectCategory.parent.name }} -> {{ selectCategory.name }}</span>
    </div>
    <hr/>
    <div class="padding10 showQuestions">
      <div v-for="item in selectCategory.questions">
        <showQuestionView :questionData="item"></showQuestionView>
        <hr/>
      </div>
    </div>
  </div>
  <div class="pull-right width30 border padding10">
    <div>
      <label :title="'问卷id：' + questionnaireData.id">问卷名称：</label>
      <span>{{questionnaireData.suName}}</span>
    </div>
    <div>
      <label>问卷描述：</label>
      <span>{{questionnaireData.description}}</span>
    </div>
    <div>
      <label>问题分类：</label>
    </div>
    <ul>
      <li v-for="(item, key1) in surveyData.categorys">
        {{ item.name }}  
        <ul>
          <li class="pointer" v-for="(itemSon, key2) in item.children" v-on:click="changeCategory(key1, key2)">
            {{ itemSon.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</template>
<script>
import showQuestionView from './previewQuestion.vue'

export default {
  name: 'previewQuestionnaire',
  data () {
    return {
      surveyData: {},
      selectCategory: {}
    }
  },
  props: {
    questionnaireData: {
      type: Object,
      default: {}
    }
  },
  components: {
    showQuestionView
  },
  methods: {
    changeCategory (index1,index2) {
      this.selectCategory = this.surveyData.categorys[index1].children[index2]
      this.selectCategory.parent = {}
      this.selectCategory.parent.id = this.surveyData.categorys[index1].id
      this.selectCategory.parent.name = this.surveyData.categorys[index1].name
      this.selectCategory.parent.description = this.surveyData.categorys[index1].description
    },
    initData (obj) {
      // console.log(obj)
      this.surveyData = obj
      this.selectCategory = obj.categorys[0].children[0]
      this.selectCategory.parent = {}
      this.selectCategory.parent.id = obj.categorys[0].id
      this.selectCategory.parent.name = obj.categorys[0].name
      this.selectCategory.parent.description = obj.categorys[0].description
    }
  },
  watch: {
    // 监听参数变化
    questionnaireData: {
      handler: function(val) {
        this.initData(val)
      },
      // 深度观察
      deep: true
    }
  },
  created () {
    this.initData(this.questionnaireData)
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.showQuestions{height: 520px; overflow-y: scroll;}
</style>
